<template>
  <CommonTipIcon
    :icon="iconComponent"
    :tooltipContent="tooltipContent"
    @click="handleClick"
  />
</template>

<script setup lang="ts">
const appSetting = useAppSetting();
const menuStatus = computed(() =>
  appSetting.menuConfig.isCollapse ? "expand" : "collapse"
);
const changeMenuConfig = appSetting.changeMenuConfig;

const menuStatusMap: Record<
  "expand" | "collapse",
  { icon: string; tooltipContent: string; next: "expand" | "collapse" }
> = {
  expand: {
    icon: "line-md:menu-fold-right",
    tooltipContent: "展开菜单",
    next: "expand",
  },
  collapse: {
    icon: "line-md:menu-fold-left",
    tooltipContent: "折叠菜单",
    next: "collapse",
  },
};

const tooltipContent = computed(
  () => menuStatusMap[menuStatus.value].tooltipContent
);
const iconComponent = computed(() => menuStatusMap[menuStatus.value].icon);

const handleClick = () => {
  changeMenuConfig({
    ...appSetting.menuConfig,
    isCollapse: menuStatus.value === "collapse",
  });
};
</script>

<style lang="less"></style>
